<!--复选框-->
<template>
  <div class="example">
    <zz-preview
      margin="10px 10px 0 0"
      v-for="file in imgList"
      :item="file"
      :info=true
      :key="file.id"
      :isAuth = true
      :th = 7
      :multiple="item.files.length > 1"
      imgWidth="185px" ></zz-preview>
    <div class="tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        imgList: [],
        explameCall: `<zz-preview
          item="file"  传入文件 文件字段应该是统一的， 如果不一样，请叫服务端改一下
          :info="false"  是否显示左边信息 默认关闭
          block="inline-block"  元素性质
          imgWidth="50px"  是否单独设置图片宽度
          width="40px"  图片和图标宽度  默认40px
          height="40px"  图片和图标宽度   默认40px
          :multiple="false"  显示的地方是否会显示多张图片 例如 同事圈
          :isConst="false"  是否只显示默认图片
          :isFilling="false"  图片是否是否填充满
          :isAuth="false"  图片是否自适应
          :isPropsPreview="true"  是否开启预览
          :th="4"  图片质量 1 原图 2 中图 3 中小图 4 小图
          :data="{id: 1}" 如果除了状态 还是传其它的值 需要在data里面设置 （下有示例）
          @handle="del" 删除事件
          ></zz-preview>`,

        explameMethods:
          `del (state) {
            this.state = state
            console.log(this.state)
          }`
      }
    },
    methods: {
      del (state) {
        this.state = state
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 20%;
    }
    .example-right{
      float: right;
      width: 78%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
